﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="../imgs/css/bootstrap.min.css">
    <link rel="stylesheet" href="../imgs/css/all.min.css">
    <link rel="stylesheet" href="../imgs/css/animate.css">
    <link rel="stylesheet" href="../imgs/css/flaticon.css">
    <link rel="stylesheet" href="../imgs/css/magnific-popup.css">
    <link rel="stylesheet" href="../imgs/css/odometer.css">
    <link rel="stylesheet" href="../imgs/css/owl.carousel.min.css">
    <link rel="stylesheet" href="../imgs/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="../imgs/css/nice-select.css">
    <link rel="stylesheet" href="../imgs/css/jquery.animatedheadline.css">
    <link rel="stylesheet" href="../imgs/css/main.css">

    <link rel="shortcut icon" href="../imgs/images/favicon.png" type="image/x-icon">

    <title>Boleto  - Online Ticket Booking Website HTML Template</title>
</head>

<body>
    <!-- ==========Preloader========== -->
    <div class="preloader">
        <div class="preloader-inner">
            <div class="preloader-icon">
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <!-- ==========Preloader========== -->
    <!-- ==========Overlay========== -->
    <div class="overlay"></div>
    <a href="#0" class="scrollToTop">
        <i class="fas fa-angle-up"></i>
    </a>
    <!-- ==========Overlay========== -->

    <%@include file="nav/nav.jsp"%>

    <!-- ==========Header-Section========== -->

    <!-- ==========Banner-Section========== -->
    <section class="banner-section">
        <div class="banner-bg bg_img bg-fixed" data-background="./../imgs/images/banner/banner01.jpg"></div>
        <div class="container">
            <div class="banner-content">
                <h1 class="title  cd-headline clip"><span class="d-block">book your</span> tickets for
                    <span class="color-theme cd-words-wrapper p-0 m-0">
                        <b class="is-visible">Movie</b>
                        <b>Event</b>
                        <b>Sport</b>
                    </span>
                </h1>
                <p>你与生活只差一场电影! You are one movie away from life!</p>
            </div>
        </div>
    </section>

    <section class="search-ticket-section padding-top pt-lg-0">
        <div class="container">
            <div class="search-tab bg_img" data-background="./../imgs/images/ticket/ticket-bg01.jpg">
                <div class="row align-items-center mb--20">
                    <div class="col-lg-6 mb-20">
                        <div class="search-ticket-header">
                            <h6 class="category">欢迎来到 Boleto </h6>
                            <h3 class="title">查询想要看的电影</h3>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-20">
                        <ul class="tab-menu ticket-tab-menu">
                            <li class="active">
                                <div class="tab-thumb">
                                    <img src="./../imgs/images/ticket/ticket-tab01.png" alt="ticket">
                                </div>
                                <span>电影</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="tab-area">
                    <div class="tab-item active">
                        <form class="ticket-search-form">
                            <div class="form-group large">
                                <input type="text" placeholder="输入电影名查找..." id="searchMovie" value="${name}" onkeydown="javascript:if(event.keyCode==13){searchMovie()}">
                                <button type="button"><i class="fas fa-search" id="searchByName" onclick="searchMovie(${cid==null?-1:cid},${aid==null?-1:aid},${cinameId==null?'':cinameId})"></i></button>
                            </div>
                            <div class="form-group">
                                <div class="thumb">
                                    <img src="./../imgs/images/ticket/city.png" alt="ticket">
                                </div>
                                <span class="type">城市</span>

                                <select class="select-bar" onchange="change_p(this)">
                                    <option value="-1">选择所在市</option>
                                    <c:forEach items="${citys}" var="c">
                                        <c:if test="${c.id==cid}">
                                            <option value="${c.id}" selected>${c.name}</option>
                                        </c:if>
                                        <c:if test="${c.id!=cid}">
                                            <option value="${c.id}">${c.name}</option>
                                        </c:if>
                                    </c:forEach>
                                </select>

                                <span class="type" id="city">地区</span>
                                <select class="select-bar" id="change_city" onchange="change_c(this,${cid==null?-1:cid})">
                                    <option value="-1">选择所在区</option>
                                    <c:if test="${null!=areas}">
                                        <c:forEach items="${areas}" var="a">
                                            <c:if test="${a.id == aid}">
                                                <option value="${a.id}" selected>${a.name}</option>
                                            </c:if>
                                            <c:if test="${a.id != aid}">
                                                <option value="${a.id}">${a.name}</option>
                                            </c:if>
                                        </c:forEach>
                                    </c:if>
                                </select>

                            </div>
                            <div class="form-group">
                                <div class="thumb">
                                    <img src="./../imgs/images/ticket/cinema.png" alt="ticket">
                                </div>
                                <span class="type">影院</span>
                                <select class="select-bar" onchange="change_cin(this,${cid==null?-1:cid},${aid==null?-1:aid})" style="width: min-content">
                                    <option value="-1">选择影院</option>
                                    <c:forEach items="${cinames}" var="c">
                                        <c:if test="${c.id==cinameId}">
                                            <option value="${c.id}" selected>${c.name}</option>
                                        </c:if>
                                        <c:if test="${c.id!=cinameId}">
                                            <option value="${c.id}">${c.name}</option>
                                        </c:if>
                                    </c:forEach>
                                </select>
                            </div>
                            <%--<div class="form-group">--%>
                            <%--    <div class="thumb">--%>
                            <%--        <img src="./../imgs/images/ticket/date.png" alt="ticket">--%>
                            <%--    </div>--%>
                            <%--    <span class="type" >日期</span>--%>
                            <%--    <select class="select-bar">--%>
                            <%--        <option value="26-12-19">23/10/2020</option>--%>
                            <%--        <option value="26-12-19">24/10/2020</option>--%>
                            <%--        <option value="26-12-19">25/10/2020</option>--%>
                            <%--        <option value="26-12-19">26/10/2020</option>--%>
                            <%--    </select>--%>
                            <%--</div>--%>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>    

    <section class="movie-section padding-top padding-bottom bg-two">
        <div class="container">
            <div class="row flex-wrap-reverse justify-content-center">
                <div class="col-lg-3 col-sm-10  mt-50 mt-lg-0">
                    <div class="widget-1 widget-facility">
                        <div class="widget-1-body">
                            <ul>
                                <li>
                                    <a href="#0">
                                        <span class="img"><img src="./../imgs/images/sidebar/icons/sidebar01.png" alt="sidebar"></span>
                                        <span class="cate">热门</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#0">
                                        <span class="img"><img src="./../imgs/images/sidebar/icons/sidebar02.png" alt="sidebar"></span>
                                        <span class="cate">100%保证</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#0">
                                        <span class="img"><img src="./../imgs/images/sidebar/icons/sidebar03.png" alt="sidebar"></span>
                                        <span class="cate">我们的承诺</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="widget-1 widget-banner">
                        <div class="widget-1-body">
                            <a href="#0">
                                <img src="./../imgs/images/sidebar/banner/banner01.jpg" alt="banner">
                            </a>
                        </div>
                    </div>
                    <div class="widget-1 widget-trending-search">
                        <h3 class="title">趋势搜索</h3>
                        <div class="widget-1-body">
                            <ul>
                                <li>
                                    <h6 class="sub-title">
                                        <a href="#0">火星</a>
                                    </h6>
                                    <p>Movies</p>
                                </li>
                                <li>
                                    <h6 class="sub-title">
                                        <a href="#0">单独地</a>
                                    </h6>
                                    <p>Movies</p>
                                </li>
                                <li>
                                    <h6 class="sub-title">
                                        <a href="#0">音乐盛会</a>
                                    </h6>
                                    <p>event</p>
                                </li>
                                <li>
                                    <h6 class="sub-title">
                                        <a href="#0">NBA游戏2020</a>
                                    </h6>
                                    <p>体育</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="widget-1 widget-banner">
                        <div class="widget-1-body">
                            <a href="#0">
                                <img src="./../imgs/images/sidebar/banner/banner02.jpg" alt="banner">
                            </a>
                        </div>
                    </div>
                </div>


                <div class="col-lg-9">
                    <div class="article-section padding-bottom">
                        <div class="section-header-1">
                            <h2 class="title">电影</h2>
                            <a class="view-all" href="#0" onclick="grids()">查看全部</a>
                        </div>


                        <div class="row mb-30-none">
                            <c:forEach items="${list}" var="p" begin="0" end="8">
                                    <div class="col-sm-6 col-lg-4">
                                        <input type="hidden" value="${p.id}" class="kkk">
                                        <div class="movie-grid">
                                            <div class="movie-thumb c-thumb">
                                                <a href="#0">
                                                    <img src="http://localhost:80/movies/${p.movieImg}" alt="movie" onclick="tt(${p.id})">
                                                </a>
                                            </div>
                                            <div class="movie-content bg-one">
                                                <h5 class="title m-0" style="font-size: 19px">
                                                    <a href="#0">${p.name}</a>
                                                </h5>
                                                <ul class="movie-rating-percent" style="margin-top: -10px">
                                                    <li>
                                                        <div class="rated">
                                                            <span class="fas fa-heart" style="color: red"></span>
                                                            <span style="color:yellow;">${p.score}</span>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <%@include file="footer/footer.jsp"%>



    <script src="../imgs/js/jquery-3.3.1.min.js"></script>
    <script src="../imgs/js/modernizr-3.6.0.min.js"></script>
    <script src="../imgs/js/plugins.js"></script>
    <script src="../imgs/js/bootstrap.min.js"></script>
    <script src="../imgs/js/heandline.js"></script>
    <script src="../imgs/js/isotope.pkgd.min.js"></script>
    <script src="../imgs/js/magnific-popup.min.js"></script>
    <script src="../imgs/js/owl.carousel.min.js"></script>
    <script src="../imgs/js/wow.min.js"></script>
    <script src="../imgs/js/countdown.min.js"></script>
    <script src="../imgs/js/odometer.min.js"></script>
    <script src="../imgs/js/viewport.jquery.js"></script>
    <script src="../imgs/js/nice-select.js"></script>
    <script src="../imgs/js/main.js"></script>
    <script>
        function tt(obj){
            window.location = "/boot/details/detail?movieid="+obj;
        }



        function grids(){
            window.location = "/boot/index/movie";
        }

        function searchMovie(cid,aid,cinameId){
            let name = document.getElementById("searchMovie").value;
            // window.location = "/boot/index/movie?name="+name;
            window.location = "/boot/index/movie?cid="+cid+"&aid="+aid+"&cinameId="+cinameId +"&name="+name;
        }

        function cc(){
            let e = event || window.event;
            if(e.keyCode==13){//敲的是enter键
                searchMovie();
            }
        }

        function change_p(obj){
            window.location = "/boot/index/movie?cid="+obj.value;
        }


        function change_c(obj,cid){
            window.location = "/boot/index/movie?cid="+cid+"&aid="+obj.value;
        }

        function change_cin(obj,cid,aid){
            window.location = "/boot/index/movie?cid="+cid+"&aid="+aid+"&cinameId="+obj.value;
        }
    </script>

    <script>

    </script>














    </script>
</body>

</html>